<!--  -->
<template>
  <view class="filter-drop-menu">
    <view v-if="showBg" class="filter-drop-menu__bg"></view>
    <wd-drop-menu custom-class="filter-drop-menu__drop">
      <wd-drop-menu-item
        title="工作地点"
        ref="locationRef"
        @opened="handleOpen"
        @closed="handleClose"
      >
        <view class="filter-drop-menu__location">
          <view class="filter-drop-menu__location__main">
            <view class="filter-drop-menu__location--province">
              <text
                v-for="item in areaTree"
                :key="item.name"
                :class="{ active: activedProvince === item.name }"
                @click="handleClickProvince(item)"
                >{{ item.name }}</text
              >
            </view>
            <view class="filter-drop-menu__location--city" v-if="currentCitys.length > 0">
              <text
                v-for="item in currentCitys"
                :key="item.name"
                :class="{ active: activedCity === item.name }"
                @click="handleClickCity(item)"
                >{{ item.name }}</text
              >
            </view>
            <view class="flex-1 overflow-hidden" v-if="currentCitys.length === 0">
              <c-empty />
            </view>
          </view>
          <view class="filter-drop-menu__location__btn">
            <c-button class="btn" plain custom-class="w-full" block @click="resetLocation"
              >重置</c-button
            >
            <c-button class="btn" custom-class="w-full" block @click="handleConfirmLocation"
              >确定</c-button
            >
          </view>
        </view>
      </wd-drop-menu-item>

      <wd-drop-menu-item
        title="精准搜索"
        ref="preciseRef"
        @opened="handleOpen"
        @closed="handleClose"
      >
        <view class="filter-drop-menu__precise">
          <view class="filter-drop-menu__precise__main">
            <view class="item" v-for="preciseType in preciseTypeList" :key="preciseType.label">
              <view class="item--title">{{ preciseType.label }}</view>
              <view class="item--list">
                <text
                  v-for="(item, index) in preciseType.list"
                  :key="index"
                  :class="{
                    active:
                      preciseParams[preciseType.key].includes(item.label) ||
                      item.value === preciseParams[preciseType.key],
                  }"
                  @click="handleClickPrecise(item, preciseType)"
                  >{{ item.label }}</text
                >
              </view>
            </view>
          </view>
          <view class="filter-drop-menu__precise__btn">
            <c-button class="btn" plain custom-class="w-full" block @click="handleResetPrecise"
              >重置</c-button
            >
            <c-button class="btn" custom-class="w-full" block @click="handleConfirmPrecise"
              >确定</c-button
            >
          </view>
        </view>
      </wd-drop-menu-item>
    </wd-drop-menu>
  </view>
</template>

<script lang="ts" setup>
  import { ApiGetAreaTree, ApiGetDictData } from '@/service/common';
  import { AreaType, DictType } from '@/service/app/types';

  const emit = defineEmits(['confirmLocation', 'confirm']);
  const showBg = ref(false);
  const areaTree = ref<Array<AreaType>>([]);
  const currentCitys = ref<Array<AreaType>>([]);
  const activedProvince = ref('');
  const activedCity = ref('');
  const locationRef = ref();
  const preciseRef = ref();
  const preciseParams = ref({
    companyNature: [],
    jobType: [],
    minEducations: [],
    timeRange: '',
  });

  // 学历选项
  const educationOptions = ref<Array<DictType>>([]);
  // 岗位类型
  const positionTypeOptions = ref<Array<DictType>>([]);
  // 企业性质
  const enterpriseNatureOptions = ref<Array<DictType>>([]);

  const preciseTypeList = computed(() => [
    {
      label: '企业类型（可多选）',
      multiple: true,
      key: 'companyNature',
      list: enterpriseNatureOptions.value,
    },
    {
      label: '岗位类型（可多选）',
      multiple: true,
      key: 'jobType',
      list: positionTypeOptions.value,
    },
    {
      label: '学历要求（可多选）',
      multiple: true,
      key: 'minEducations',
      list: educationOptions.value,
    },
    {
      label: '岗位开启时间',
      multiple: false,
      key: 'timeRange',
      list: [
        { value: 'today', label: '今天' },
        { value: 'threeDays', label: '近三天' },
        { value: 'oneWeek', label: '近一周' },
        { value: 'oneMonth', label: '近一个月' },
        { value: 'threeMonths', label: '近三个月' },
        { value: 'unlimited', label: '不限' },
      ],
    },
  ]);

  // 选择省份
  const handleClickProvince = (item: AreaType) => {
    console.log(item);
    if (activedProvince.value && activedProvince.value !== item.name) {
      activedProvince.value = '';
    }
    activedProvince.value = item.name;

    if (item.name !== '全国') {
      currentCitys.value = [{ name: '全部', id: item.id }, ...(item.children as Array<AreaType>)];
    } else {
      currentCitys.value = item.children as Array<AreaType>;
    }
  };
  // 选择城市
  const handleClickCity = (item: AreaType) => {
    activedCity.value = item.name;
  };
  // 重置地点选择
  const resetLocation = () => {
    activedProvince.value = '';
    activedCity.value = '';
    currentCitys.value = [];
    handleConfirmLocation();
  };
  // 确定地点选择
  const handleConfirmLocation = () => {
    emit('confirmLocation', {
      provinceName: activedProvince.value,
      cityName: activedCity.value === '全部' ? '' : activedCity.value,
    });
    locationRef.value.close();
  };

  const handleClickPrecise = (item, preciseType) => {
    if (preciseType.multiple) {
      if (preciseParams.value[preciseType.key].includes(item.label)) {
        preciseParams.value[preciseType.key] = preciseParams.value[preciseType.key].filter(
          (el) => el !== item.label,
        );
      } else {
        preciseParams.value[preciseType.key] = [
          ...preciseParams.value[preciseType.key],
          item.label,
        ];
      }
    } else {
      preciseParams.value[preciseType.key] = item.value;
    }
  };
  // 重置精准查询
  const handleResetPrecise = () => {
    preciseParams.value = {
      companyNature: [],
      jobType: [],
      minEducations: [],
      timeRange: '',
    };
    handleConfirmPrecise();
  };
  // 确定精准查询
  const handleConfirmPrecise = () => {
    const { companyNature, jobType, minEducations, timeRange } = preciseParams.value;
    emit('confirm', {
      companyNature: companyNature.join(','),
      jobType: jobType.join(','),
      minEducations: minEducations.join(','),
      timeRange,
    });
    preciseRef.value.close();
  };

  const handleOpen = () => {
    showBg.value = true;
  };
  const handleClose = () => {
    showBg.value = false;
  };

  onMounted(() => {
    ApiGetAreaTree().then(({ data }) => {
      areaTree.value = [
        { id: undefined, name: '全国', children: [{ id: undefined, name: '全部' }] },
        ...(data as Array<AreaType>),
      ];
    });
    ApiGetDictData('educational_background').then((res) => {
      educationOptions.value = [
        ...(res.data as Array<DictType>),
        { value: undefined, label: '不限' },
      ];
    });
    ApiGetDictData('position_type').then((res) => {
      positionTypeOptions.value = [
        ...(res.data as Array<DictType>),
        { value: undefined, label: '不限' },
      ];
    });
    ApiGetDictData('enterprise_nature').then((res) => {
      enterpriseNatureOptions.value = res.data as Array<DictType>;
    });
  });
</script>

<style lang="scss" scoped>
  .filter-drop-menu {
    &__bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40%;
      background: #fff;
      z-index: -1;
    }
    @mixin dropItem {
      height: 58vh;
      display: flex;
      overflow: hidden;
      flex-direction: column;
      border-top: 2rpx solid rgba(62, 70, 84, 0.09);
    }
    @mixin btn {
      flex-shrink: 0;
      display: flex;
      padding: 18rpx 20rpx;
      box-shadow: inset 0rpx 1rpx 0rpx 0rpx rgba(62, 70, 84, 0.09);
      gap: 20rpx;
      .btn {
        flex: 1 0 0;
      }
    }
    @mixin tag {
      background: rgba(62, 70, 84, 0.05);
      border-radius: 8rpx;
      padding: 14rpx 16rpx;
      text-align: center;
      color: $uni-color-title;
      box-sizing: border-box;
      border: 2rpx solid transparent;
      &.active {
        border: 2rpx solid $uni-color-primary;
        background: rgba($uni-color-primary, $alpha: 0.1);
        color: $uni-color-primary;
      }
    }
    &__location {
      @include dropItem();
      &__main {
        flex: 1 0 0;
        display: flex;
        overflow-y: auto;
      }
      &--province {
        flex-shrink: 0;
        padding: 20rpx;
        height: 100%;
        width: 228rpx;
        box-sizing: border-box;
        overflow-y: auto;
        box-shadow: inset -1rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);

        border-radius: 20rpx 0rpx 0rpx 20rpx;
        text {
          display: block;
          padding: 14rpx;
          text-align: center;
          color: $uni-color-title;
          font-size: 30rpx;
          &.active {
            background: linear-gradient(138deg, #fd771a 0%, #fea625 100%);
            border-radius: 8rpx;
            color: #fff;
          }
        }
        text + text {
          margin-top: 20rpx;
        }
      }
      &--city {
        flex: 1 0 0;
        padding: 20rpx;
        display: grid;
        gap: 20rpx;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 72rpx;
        overflow-y: auto;
        text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          @include tag();
        }
      }

      &__btn {
        @include btn();
      }
    }
    &__precise {
      @include dropItem();
      &__main {
        flex: 1 0 0;
        padding: 0 32rpx;
        overflow-y: auto;
        .item {
          margin-bottom: 40rpx;
          &--title {
            font-size: 26rpx;
            color: $uni-color-title;
            padding: 20rpx 0;
            font-weight: 600;
          }
          &--list {
            flex-wrap: wrap;
            display: flex;
            gap: 20rpx;
            text {
              min-width: 116rpx;
              @include tag();
            }
          }
        }
      }
      &__btn {
        @include btn();
      }
    }
  }
</style>
